<template>
  <div style="margin-top: 100px; margin-left: 100px">
    <input ref="inputRef" type="text" />

    <p>
      count is {{ count }}&nbsp; &nbsp;
      <button @click="count++">+1</button>
    </p>
    <p>
      <button @click="force">强制更新</button>
    </p>

    <p>
      <button @click="edit">编辑</button>
    </p>
    <child ref="childRef" />
  </div>
</template>

<script>
import child from './child'
import Vue from 'vue'
export default {
  components: {
    child
  },
  data () {
    return {
      count: 100
    }
  },
  created () {
    // this.$refs.inputRef.focus()

    // 对事件循环的封装
    // this.后面加$
    // this.$nextTick(() => {
    //   this.$refs.inputRef.focus()
    // })

    // Vue后面不要加$
    // nextTick会等着下一个事件循环时执行（当前的视图渲染完毕，才会开启事件循环）
    Vue.nextTick(() => {
      this.$refs.inputRef.focus()
    })

    // setTimeout(() => {
    //   this.$refs.inputRef.focus()
    // }, 0)
  },
  // mounted () {
  //   this.$refs.inputRef.focus()
  // },
  updated () {
    console.log('---updated---')
  },
  methods: {
    force () {
      this.$forceUpdate()
    },
    // 编辑
    edit () {
      this.$refs.childRef.dialogVisible = true

      // 等着对话框中的Form表单渲染完成之后，在给他赋值
      this.$nextTick(() => {
        this.$refs.childRef.form = {
          name: '张三',
          age: 30,
          address: '北京'
        }
      })
    }
  }
}
</script>
